<template>
  <div class="template-showcase">
    <div class="header">
      <h2>{{ templateTitle }}</h2>
      <div class="actions">
        <el-button class="touch-friendly" @click="$router.back()">返回</el-button>
        <el-button type="primary" class="touch-friendly" @click="goToTemplate">
          使用此模板
        </el-button>
      </div>
    </div>

    <div class="main-content">
      <!-- 左侧展示图 -->
      <div class="showcase-section">
        <el-carousel 
          height="auto" 
          indicator-position="outside" 
          :autoplay="true" 
          interval="5000"
          class="carousel-container"
        >
          <el-carousel-item v-for="(image, index) in showcaseImages" :key="index">
            <div class="carousel-content">
              <img :src="image.url" :alt="image.alt" class="showcase-image" />
              <div class="image-caption">{{ image.caption }}</div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>

      <!-- 右侧模板信息 -->
      <div class="info-section">
        <el-card class="info-card">
          <template #header>
            <div class="card-header">
              <span>模板信息</span>
            </div>
          </template>
          <div class="template-info">
            <h3>{{ templateInfo.name }}</h3>
            <div class="info-item">
              <span class="label">类型:</span>
              <span class="value">{{ templateInfo.category }}</span>
            </div>
            <div class="info-item">
              <span class="label">作者:</span>
              <span class="value">{{ templateInfo.author }}</span>
            </div>
            <div class="info-item">
              <span class="label">更新时间:</span>
              <span class="value">{{ formatDate(templateInfo.updated_at) }}</span>
            </div>
            <div class="description">
              <h4>描述</h4>
              <p>{{ templateInfo.description }}</p>
            </div>
          </div>
        </el-card>

        <el-card class="usage-card">
          <template #header>
            <div class="card-header">
              <span>使用指南</span>
            </div>
          </template>
          <div class="usage-guide">
            <h4>如何使用</h4>
            <ol>
              <li v-if="templateType === 'img2img'">上传一张基础图片作为参考</li>
              <li>输入详细的提示词描述您想要的图像</li>
              <li>调整参数以获得最佳效果</li>
              <li>点击生成按钮开始创作</li>
            </ol>
            <div class="tips">
              <h4>提示</h4>
              <ul>
                <li>提示词越详细，生成效果越好</li>
                <li>使用反向提示词排除不需要的元素</li>
                <li>尝试不同的采样方法和步数</li>
                <li>保存您喜欢的参数作为预设</li>
              </ul>
            </div>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 移动端固定操作栏 -->
    <div class="mobile-action-bar">
      <el-button class="mobile-action-btn" @click="$router.back()">返回</el-button>
      <el-button type="primary" class="mobile-action-btn" @click="goToTemplate">使用此模板</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { request } from '@/utils/request';

const route = useRoute();
const router = useRouter();

// 模板类型
const templateType = computed(() => {
  return route.query.type || '';
});

// 模板标题
const templateTitle = computed(() => {
  const titleMap: Record<string, string> = {
    'text2img': '文生图模板',
    'img2img': '图生图模板',
    'portrait': '人物肖像模板'
  };
  return titleMap[templateType.value as string] || '模板展示';
});

// 模板信息
const templateInfo = ref({
  id: '',
  name: '加载中...',
  description: '加载中...',
  category: '加载中...',
  author: '加载中...',
  updated_at: new Date().toISOString()
});

// 展示图片
const showcaseImages = ref([
  {
    url: '/placeholder.png',
    alt: '示例图片',
    caption: '加载中...'
  }
]);

// 根据模板类型设置默认展示图
const setDefaultShowcaseImages = () => {
  if (templateType.value === 'text2img') {
    showcaseImages.value = [
      {
        url: 'https://img.freepik.com/free-photo/painting-mountain-lake-with-mountain-background_188544-9126.jpg',
        alt: '文生图示例1',
        caption: '使用详细提示词生成的风景图'
      },
      {
        url: 'https://img.freepik.com/free-photo/surreal-landscape-with-floating-islands_23-2150165846.jpg',
        alt: '文生图示例2',
        caption: '使用创意提示词生成的幻想场景'
      },
      {
        url: 'https://img.freepik.com/free-photo/futuristic-city-sunset_23-2150812756.jpg',
        alt: '文生图示例3',
        caption: '使用科幻提示词生成的未来城市'
      }
    ];
  } else if (templateType.value === 'img2img') {
    showcaseImages.value = [
      {
        url: 'https://img.freepik.com/free-photo/before-after-image-editing-effect-landscape_23-2150169842.jpg',
        alt: '图生图示例1',
        caption: '原图与生成图对比'
      },
      {
        url: 'https://img.freepik.com/free-photo/digital-art-selected-person-nature-scene_23-2150169838.jpg',
        alt: '图生图示例2',
        caption: '照片转为艺术风格'
      },
      {
        url: 'https://img.freepik.com/free-photo/digital-art-paint-with-colorful-splash-effects_23-2150169851.jpg',
        alt: '图生图示例3',
        caption: '添加创意元素的图生图效果'
      }
    ];
  }
};

// 获取工作流信息
const fetchWorkflowInfo = async () => {
  const workflowId = route.query.workflow_id;
  if (!workflowId) {
    ElMessage.error('未找到工作流ID');
    return;
  }

  try {
    const response = await request(`/api/v1/workflows/${workflowId}`);
    if (response) {
      templateInfo.value = {
        id: response.id,
        name: response.name,
        description: response.description || '暂无描述',
        category: getCategoryLabel(response.category),
        author: response.author || '未知作者',
        updated_at: response.updated_at
      };
      
      // 如果有预览图，添加到展示图中
      if (response.preview_image) {
        showcaseImages.value.unshift({
          url: response.preview_image,
          alt: response.name,
          caption: '模板预览图'
        });
      }
    }
  } catch (error) {
    console.error('获取工作流信息失败:', error);
    ElMessage.error('获取工作流信息失败');
  }
};

// 格式化日期
const formatDate = (dateString: string) => {
  const date = new Date(dateString);
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  });
};

// 获取分类标签
const getCategoryLabel = (category: string) => {
  const categoryMap: Record<string, string> = {
    'text2img': '文生图',
    'img2img': '图生图',
    'portrait': '人物肖像'
  };
  return categoryMap[category] || category;
};

// 跳转到模板页面
const goToTemplate = () => {
  const workflowId = route.query.workflow_id;
  const templateRoutes: Record<string, string> = {
    'text2img': '/templates/text2img',
    'img2img': '/templates/img2img',
    'portrait': '/templates/portrait'
  };
  
  const targetRoute = templateRoutes[templateType.value as string];
  if (targetRoute) {
    router.push({
      path: targetRoute,
      query: { 
        workflow_id: workflowId,
        mode: 'use'
      }
    });
  } else {
    ElMessage.warning('未找到对应的模板页面');
  }
};

onMounted(() => {
  setDefaultShowcaseImages();
  fetchWorkflowInfo();
});
</script>

<style lang="scss" scoped>
@use '@/assets/styles/responsive.scss' as responsive;

.template-showcase {
  padding: 20px;
  min-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  position: relative;
  
  @include responsive.respond-to('sm') {
    padding: 16px;
    padding-bottom: 70px; // 为底部操作栏留出空间
  }
  
  @include responsive.respond-to('xs') {
    padding: 12px;
    padding-bottom: 70px;
  }
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  
  h2 {
    margin: 0;
    font-size: 24px;
    
    @include responsive.respond-to('sm') {
      font-size: 20px;
    }
  }
  
  .actions {
    display: flex;
    gap: 12px;
    
    @include responsive.respond-to('sm') {
      display: none;
    }
  }
}

.main-content {
  display: flex;
  gap: 20px;
  flex: 1;
  min-height: 0;
  
  @include responsive.respond-to('lg') {
    gap: 16px;
  }
  
  @include responsive.respond-to('md') {
    flex-direction: column;
  }
}

.showcase-section {
  flex: 0 0 60%;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  
  @include responsive.respond-to('md') {
    flex: 0 0 auto;
    margin-bottom: 16px;
  }
}

.carousel-container {
  height: 500px;
  
  @include responsive.respond-to('lg') {
    height: 400px;
  }
  
  @include responsive.respond-to('md') {
    height: 350px;
  }
  
  @include responsive.respond-to('sm') {
    height: 300px;
  }
  
  @include responsive.respond-to('xs') {
    height: 250px;
  }
}

.info-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
  
  @include responsive.respond-to('lg') {
    gap: 16px;
  }
}

.showcase-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-content {
  position: relative;
  height: 100%;
}

.image-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 10px;
  text-align: center;
  
  @include responsive.respond-to('xs') {
    padding: 8px;
    font-size: 14px;
  }
}

.info-card, .usage-card {
  margin-bottom: 0;
}

.card-header {
  font-weight: bold;
}

.template-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  
  h3 {
    margin-top: 0;
    margin-bottom: 8px;
    
    @include responsive.respond-to('xs') {
      font-size: 18px;
    }
  }
}

.info-item {
  display: flex;
  gap: 10px;
  
  @include responsive.respond-to('xs') {
    flex-direction: column;
    gap: 4px;
  }
}

.label {
  font-weight: bold;
  color: #606266;
  min-width: 80px;
  
  @include responsive.respond-to('xs') {
    min-width: auto;
  }
}

.value {
  color: #303133;
}

.description {
  margin-top: 10px;
  
  h4 {
    margin-bottom: 8px;
    color: #606266;
  }
  
  p {
    line-height: 1.6;
    color: #303133;
    
    @include responsive.respond-to('xs') {
      font-size: 14px;
    }
  }
}

.usage-guide {
  display: flex;
  flex-direction: column;
  gap: 15px;
  
  h4 {
    margin-bottom: 8px;
    color: #606266;
  }
  
  ol, ul {
    padding-left: 20px;
    margin: 0;
    
    li {
      margin-bottom: 8px;
      line-height: 1.6;
      
      @include responsive.respond-to('xs') {
        font-size: 14px;
        margin-bottom: 6px;
      }
    }
  }
}

.tips {
  background-color: #f5f7fa;
  padding: 12px;
  border-radius: 4px;
  margin-top: 10px;
  
  @include responsive.respond-to('xs') {
    padding: 10px;
  }
}

// 移动端固定操作栏
.mobile-action-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  padding: 10px 16px;
  z-index: 100;
  
  @include responsive.respond-to('sm') {
    display: flex;
    justify-content: space-between;
  }
  
  .mobile-action-btn {
    flex: 1;
    height: 44px;
    font-size: 16px;
    
    &:first-child {
      margin-right: 12px;
    }
  }
}
</style> 